<%--
  Created by IntelliJ IDEA.
  User: ChenYu
  Date: 2017-06-12
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/static/common/taglib.jsp" %>
<html>
<head>
    <%@include file="../public/back/commonCss.jsp" %>
    <%@include file="../public/back/commonJs.jsp" %>
</head>
<body ms-controller="shoesList" class="ms-controller">
<div style="padding: 10px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>搜索</legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">编号：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="num" placeholder="编号" class="layui-input">
                </div>
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="name" placeholder="名称" class="layui-input">
                </div>
                <label class="layui-form-label">男款/女款：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <select name="belongSex">
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <label class="layui-form-label">上架/下架：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <select name="status">
                        <option value="">请选择</option>
                        <option value="0">已下架</option>
                        <option value="1">已上架</option>
                    </select>
                </div>
                <button class="layui-btn" style="margin-left: 20px" lay-submit="" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 20px">重置</button>
            </div>
        </div>
    </form>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>鞋款列表</legend>
    </fieldset>
    <div class="box" style="width: 260px;" ms-repeat="tableData">
        <div class="box-tit">
            更新时间：<span style="color:red;">{{el.modifyTime}}</span>
            <span style="float: right">
                <button class="layui-btn layui-btn-mini layui-btn-normal" ms-if="el.status==1">已上架</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary" ms-if="el.status==0">已下架</button>
            </span>
        </div>
        <div class="box-con">
            <p style="margin-top: 5px">
                <button class="layui-btn layui-btn-mini layui-btn-primary">
                    <span style="color: #a03154;">
                        No.{{el.sortOrder}}
                    </span>
                </button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.num}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.name}}</button>
            </p>
            <p>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.style}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.material}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.shoeBelow}}</button>
            </p>
            <p>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.belongSex}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.color}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">￥{{el.price}}</button>
                <button class="layui-btn layui-btn-mini layui-btn-primary">{{el.sizeRange}}</button>

            </p>
            <div style="text-align: center">
                <img class="img" ms-attr-src="${baseInfo.fileServerPath}{{el.coverImg}}"
                     ms-if="el.coverImg!=null&&el.coverImg!=''">
                <img class="img" src="${ctx}/static/back/images/detail.png" ms-if="el.coverImg==null||el.coverImg==''">
            </div>
            <span style="display: inline-block;height: 70px">
                {{el.description|truncate(50)}}
            </span>
            <div class="mask" ms-on-click="taoBaoShow(el)"><span>淘宝查看</span></div>
        </div>
        <div class="box-fj">
            <button class="layui-btn layui-btn-mini" ms-on-click="shoesGoOrBack(el,1)" ms-if="el.status==0">
                <i class="layui-icon">&#xe619;</i>上架
            </button>
            <button class="layui-btn layui-btn-mini" ms-on-click="shoesGoOrBack(el,0)" ms-if="el.status==1">
                <i class="layui-icon">&#xe61a;</i>下架
            </button>
            <button class="layui-btn layui-btn-mini layui-btn-normal" ms-on-click="shoesEdit(el)">
                <i class="layui-icon">&#xe642;</i>修改
            </button>
            <button class="layui-btn layui-btn-mini layui-btn-danger" ms-on-click="shoesDelete(el)">
                <i class="layui-icon">&#xe640;</i>删除
            </button>
        </div>
    </div>
    <!-- 分页 -->
    <div id="demo" class="fenye">
    </div>
</div>
<script>
    form.render();
    var vm = {
        pageObj: {pageNum: 1, pageSize: 10, totalRows: 0},
        tableData: [],
        searchKey: {}
    }
    vm = avalonFn.define("shoesList", vm);
    $(function () {
        loadTableData();
    });

    //上架或者下架
    function shoesGoOrBack(el, status) {
        var dataStr = {id: el.id, status: status};
        ajaxUtil.post("${ctx}/back/shoes/updateShoesStatus", dataStr, false, function (data) {
            loadTableData(avalonFn.model(vm).searchKey);
        });
    }

    //删除
    function shoesDelete(el) {
        parent.layerUtil.confirm("你确定删除该款鞋吗?", function () {
            ajaxUtil.post('${ctx}/back/shoes/delete/' + el.id, "", false, function (data) {
                parent.layerUtil.success("删除成功");
                loadTableData(avalonFn.model(vm).searchKey);
            })
        });
    }

    //编辑
    function shoesEdit(el) {
        window.location.href = '${ctx}/back/shoes/toShoesEdit/' + avalonFn.model(el).id;
    }

    //加载表格数据
    function loadTableData() {
        var dataStr = jsonUtil.mergeJsonObj(avalonFn.model(vm).searchKey, avalonFn.model(vm).pageObj);
        console.log(dataStr);
        ajaxUtil.post("${ctx}/back/shoes/selectAll", dataStr, true, function (data) {
            vm.tableData = data.dataMap.result;
            vm.pageObj.totalRows = data.dataMap.totalRows;
            console.log(vm.$model.pageObj.totalRows);
            pageUtil.renderPage(vm.pageObj, loadTableData, 'demo');
        })
    }

    //监听提交
    form.on('submit(demo1)', function (data) {
        vm.searchKey = data.field;
        loadTableData();
        return false;
    });

    /**
     * 淘宝查看
     * @param el
     */
    function taoBaoShow(el) {
        if (el.taoBaoHref != '') {
            window.open(el.taoBaoHref);
        }
    }
</script>
</body>
</html>
